<template>
	<div class="main">
		<el-row>
			<el-col :span="24" class="mainHeader">
				<!-- 图标 -->
				<el-col :span="3" :class="folded?'folded':'mainHeader-left'">
					<div :class="folded?'mainHeader-slogo':'mainHeader-logo'"></div>
				</el-col>
				<!-- 伸缩图标 -->
				<el-col :span="1" class="mainHeader-middle">
					<div class="tool" @click.prevent="fold">
						<i class="fa fa-bars"></i>
					</div>
				</el-col>
				
				<el-col :span="20" class="mainHeader-right">
					<el-dropdown>
						<span class="el-dropdown-link">
    						{{userName}}<img class="mainHeader-userAvatar" :src="this.userAvatar"/>
  						</span>

						<el-dropdown-menu slot="dropdown" style="width: 280px;">
							<el-dropdown-item style="text-align: center;border-bottom: 1px dashed #d4d4d4;">
								<div @click="dialogFormVisible = true" class="mainHeader-avatar">
									<img :src="this.userAvatar" title="点击可修改头像" style="width: 100px;height: 100px;border: 2px solid #00c0ef;border-radius: 50px;margin: 10px 0;" />
								</div>
								<p>{{userName}}</p>
								职位：<span>{{posInfo}}</span>
							</el-dropdown-item>

							<el-dropdown-item style="text-align: center;border-bottom: 1px dashed #d4d4d4;padding: 5px 0;">
								手机: <span>{{telephone}}</span>
							</el-dropdown-item>

							<el-dropdown-item style="text-align: center;padding: 10px 0;">
								<el-button type="warning" @click="dialogpwdFormVisible=true">
									修改密码
								</el-button>
								<el-button type="danger" @click="logout">
									注销
								</el-button>
							</el-dropdown-item>
              
						</el-dropdown-menu>
					</el-dropdown>



					<el-dialog title="修改头像" :visible.sync="dialogFormVisible" size="tiny" style="text-align: left;">
						<div class="mainHeader-modifyAvatarCenter">
							<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" title="点击图片可修改头像">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
						<div class="mainHeader-modifyAvatarFooter">
							<!-- 确定按钮需要添加-->
							<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
							<el-button @click="dialogFormVisible = false">取消</el-button>
						</div>
					</el-dialog>


					<el-dialog title="修改密码" :visible.sync="dialogpwdFormVisible" size="tiny" style="text-align: left;" @close="cancelModifyPass">
						<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
							<el-form-item label="密码" prop="pass" auto-complete="off">
								<!--<el-input type="text" v-model="ruleForm2.pass" auto-complete="off" class="inputType" @input="changeInputType"></el-input>-->
								<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPass">
								<el-input type="password" v-model="ruleForm2.checkPass" class="inputType"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
								<el-button @click="cancelModifyPass">取消</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					

				</el-col>
			</el-col>
		</el-row>

		<el-row class="mainContent">
			<el-col :span="24">
				<!--左侧菜单栏未折叠-->
				<el-col :span="folded?1:3" class="mainSide-left">
					<el-menu default-active="1" class="el-menu-vertical-demo mainSide-left-content">
						<router-link to="/userList">
							<el-menu-item index="1"><img src="../assets/usermanage-32.png" title="用户管理" /><span v-show="!folded">用户管理</span></el-menu-item>
						</router-link>
						<router-link to="/Institution">
							<el-menu-item index="2"><img src="../assets/hospital-32.png" title="医疗机构" /><span v-show="!folded">医疗机构</span></el-menu-item>
						</router-link>
						<router-link to="/Filedownload">
							<el-menu-item index="3"><img src="../assets/filedownload-32.png" title="文件下载" /><span v-show="!folded">文件下载</span></el-menu-item>
						</router-link>
						<router-link to="/roles">
							<el-menu-item index="4"><img src="../assets/roles-32.png" title="角色管理" /><span v-show="!folded">角色管理</span></el-menu-item>
						</router-link>
						<router-link to="/permission">
							<el-menu-item index="5"><img src="../assets/permission-32.png" title="权限管理" /><span v-show="!folded">权限管理</span></el-menu-item>
						</router-link>
						<router-link to="/application">
							<el-menu-item index="6"><img src="../assets/application-32.png" title="申请管理" /><span v-show="!folded">申请管理</span></el-menu-item>
						</router-link>
					</el-menu>
				</el-col>
				<el-col :span="folded?23:21" class="mainContent-right">
					<router-view></router-view>
				</el-col>
			</el-col>
		</el-row>

		<!-- 底部版本信息 -->
		<el-row class="version">
			<el-col :span="24" class="mainFooter">
				<el-col :span="folded?1:3" class="mainFooter-left">
				</el-col>
				<el-col :span="folded?23:21" class="mainFooter-right">
					<b>Copyright © 2016-2020 <b class="mainFooter-left-text">JF Healthcare</b>.</b> All rights reserved.
				</el-col>

			</el-col>
		</el-row>

	</div>
</template>

<script>
import { getCurrentUserInfo, logOut } from "../api/api";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };

    return {
      folded: false,
      dialogFormVisible: false,
      dialogpwdFormVisible: false,
      isCollapse: false,
      userName: "",
      userAvatar: "", //用户头像,
      posInfo: "",
      telephone: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      imageUrl: "",
      ruleForm2: {
        pass: "",
        checkPass: "",
        age: ""
      },
      rules2: {
        pass: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath, isCollapse);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    fold: function() {
      // 折叠导航栏
      this.folded = !this.folded;
    },
    hasCollapse: function() {
      //折叠取反
      this.isCollapse = !this.isCollapse;
    },
    handleAvatarSuccess(res, file) {
      // 修改头像url
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
      this.userAvatar = this.imageUrl;
    },
    beforeAvatarUpload(file) {
      // <2M
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      // imageSize
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    hasCollapse: function() {
      this.$message.error("只能上传1张图片");
      return false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // modify password
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    logout: function() {
      // logout
      var _this = this;
      this.$confirm("确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          logOut().then(() => {
            sessionStorage.removeItem("userInfo");
            _this.$router.push("/");
          });
        })
        .catch(() => {});
    },
    cancelModifyPass: function() {
      this.resetForm("ruleForm2");
      this.dialogpwdFormVisible = false;
      //			,changeInputType:function(){
      //				var inpType=document.querySelector(".inputType").children[0];
      //				inpType.type="password";
      //			}
    }
  },
  mounted() {
    var userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (userInfo) {
      this.userName = userInfo.accountName || "Admin";
      this.userAvatar = userInfo.avatar || "/static/user.png";
      this.posInfo = userInfo.position;
      this.telephone = userInfo.telephone;
    }
  }
};
</script>
<style lang="scss" scoped>
$background: #929292;
$bgTiltle: #d4d4d4;
.main {
  position: relative;
  .mainHeader {
    height: 50px;
    background: $bgTiltle;
    .mainHeader-logo {
      width: 127px;
      height: 37px;
      margin-left: 20px;
      margin-top: 7px;
      background: url("../assets/logo.png");
    }
    .mainHeader-slogo {
      margin: 7px 20px 0 20px;
      width: 35px;
      height: 37px;
      background: url("../assets/slogo.png");
    }
    .mainHeader-left {
      margin-left: -0.5px;
      height: 50px;
      background: $background;
    }
    .folded {
      height: 50px;
      width: 80px;
      margin-left: -2px;
      background: $bgTiltle;
    }
    .mainHeader-middle {
      .tool {
        height: 50px;
        padding-left: 10px;
        line-height: 50px;
        font-size: 24px;
        color: #444;
        cursor: pointer;
        text-align: left;
      }
    }
    .mainHeader-right {
      text-align: right;
      padding-right: 30px;
      float: right;
      height: 50px;
      .el-dropdown-link {
        line-height: 50px;
        font-size: 14px;
        color: #444;
        cursor: pointer;
      }
      .mainHeader-userAvatar {
        line-height: 50px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 5px 0 5px 5px;
        float: right;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .mainHeader-modifyAvatarCenter {
        width: 95%;
        margin-left: 2.4%;
        padding: 10px 0;
        text-align: center;
        border-radius: 6px;
        border: 2px dashed #ccc;
      }
      .mainHeader-modifyAvatarFooter {
        margin-top: 20px;
      }
    }
  }
  .mainContent {
    .mainSide-left {
      min-height: 850px;
      border-right: solid 1px #eaeaea;
      background-color: #113460;
      text-align: left;
      font-size: 14px;
      .mainSide-left-content {
        background-color: #113460;
      }
      .el-menu-item {
        color: #adc9f4;
        img {
          margin: 16px 10px 0 0;
          float: left;
          width: 24px;
        }
      }
      .el-menu-item:hover {
        background: transparent;
        color: #fff;
        background: #074ca1;
      }
      .is-active {
        color: #ecf0f5;
        background-color: #0a225e;
        border-left: 4px solid $bgTiltle;
      }
    }
    .mainContent-right {
      height: 691px;
      background: #fff;
    }
  }
  .mainFooter {
    right: 0;
    position: absolute;
    bottom: 0px;
    text-align: center;
    color: #444;
    .mainFooter-left {
      height: 45px;
    }
    .mainFooter-right {
      line-height: 45px;
      border-top: solid 1px #ccc;
    }
    .mainFooter-left-text {
      color: #337ab7;
    }
  }
  .mainFooter-right {
    float: right;
  }
}
</style>